<template>
	<view class="select-cost-type">
		<view class="search-box">
			<uni-search-bar  placeholder="请搜索名称或编码" :radius="100" @confirm="search"></uni-search-bar>
		</view>
		<view class="content-box">
			<view class="content-list" v-for="item in contentList" :key="item.index">
				<navigator v-if="item.title==='机票费'" url="./expenseDetail">
			    <view  class="content-item">
			    	<icon-svg :icon-class="item.icon"  :style="{'color':`${item.color}`}"></icon-svg>
			    	<text>{{item.title}}</text>
			    </view>
				</navigator>
				<view v-else class="content-item">
					<icon-svg :icon-class="item.icon"  :style="{'color':`${item.color}`}"></icon-svg>
					<text>{{item.title}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
export default {
	 components:{uniSearchBar},
	 data(){
		 return{
			 contentList:[
				 {icon:'feiji2',title:'机票费',color:'#FFC000'},
				 {icon:'ziyuanleixing-huochepiao',title:'铁路运输费',color:'#45A3EC'},
				 {icon:'huochepiao',title:'水路公路费',color:'#09A8C1'},
				 {icon:'shouqi',title:'市内交通费',color:'#63B95E'},
				 {icon:'service-hotel-copy',title:'住宿费',color:'#EC514D'},
				 {icon:'jilu1',title:'差旅补贴',color:'#EC999B'},
				 {icon:'jiudian2',title:'办公楼',color:'#0570C3'},
			 ]
		 }
	 }
}
</script>

<style lang="scss" scoped>
.select-cost-type{
	background-color: #fff;
 .content-box{
	.content-list{
		display: flex;
		.content-item{
		 line-height: 90rpx;
		 height: 90rpx;
		 padding: 0 20rpx;
			.svg-icon{
				font-size:1.4em;
			}
			text{
				margin-left: 20rpx;
			}
		}
		
	} 
 }	
}
</style>
